<template>
	<view>
		<view class="p-4 title h8 font-weight-700">查看您惊艳的作品制作情况</view>
		<view class="flex flex-row flex-x-space-between">
			<view class="select">
				<y-select @click="handItem" :list='categoryList'></y-select>
			</view>
			<view class="select">
				<y-select :list='categoryList1' @click="handItem1"></y-select>
			</view>
		</view>

		<view class="flex flex-center vh-60" v-if='total==0'>
			<image src='https://xcyd.kf.kaifa.cc/app/ycAivdo/image/empty.png' class="empty"></image>
		</view>

		<view class="flex flex-row flex-wrap flex-x-space-between p-4">
			<view v-for="(item,index) in list" class="item-box rounded-5 mb-5" :key='index' @click="Project(item)">
				<view class="subscript rounded-bottom-left-6  pb-1 pl-2 pr-2 ">
					<view class="title font-weight-800">{{item.status=='4'?'已完成':'制作中'}}</view>
				</view>
				<view class="flex flex-column ">
					<view class="item-image">
						<image mode="aspectFit"  :src="item?.material?.url" class="item-image">
						</image>
					</view>
					<view class="item-content p-4 rounded-bottom-left-5 rounded-bottom-right-5">
						<view class="text-white title-1 mb-1">{{item.name}}</view>
						<view class="text-white title-2">{{item.create_at}}</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app'
	import { $http, $page } from '@/utils'
	const list = ref([])
	const categoryList = ref([
		{ name: "全部", value: '0' },
		{ name: "文转视频", value: '1' },
		{ name: "小说转漫", value: '2' },
	])
	const categoryList1 = ref([
		{ name: "全部", value: '0' },
		{ name: "制作中", value: '1' },
		{ name: "已完成", value: '2' }
	])
	const status = ref(false)
	const total = ref(0)
	const queryForm = ref({
		page: 1,
		limit: 10,
		type: "0",
		status: "0"
	})
	onShow(() => {
		queryForm.value = {
			page: 1,
			limit: 10,
			type: "0",
			status: "0"
		}
		list.value = []
		getList()
	})
	//类型切换
	const handItem = ((e : any) => {
		queryForm.value.page = 1
		queryForm.value.type = e.value
		list.value = []
		getList()
	})
	//状态切换
	const handItem1 = ((e : any) => {
		queryForm.value.page = 1
		queryForm.value.status = e.value
		list.value = []
		getList()
	})
	const getList = (() => {
		$http.get('Video/getList', { data: queryForm.value }).then(res => {
			total.value = res.data.total
			let data = res.data.data
			list.value.push.apply(list.value, data)
			if (list.value.length >= total.value) {
				status.value = false
			}
		})
	})

	//页面触底
	onReachBottom(() => {
		status.value = false
		queryForm.value.limit = 10
		queryForm.value.page++
		getList()
	})

	const Project = ((e : any) => {
		if (e.status == "0") {
			$page.open('/pages/video/section?id=' + e.id)
		} else {
			$page.open('/pages/video/create?id=' + e.id)
		}
	})
</script>

<style>
	.title {
		background: linear-gradient(270deg, #3787FF 0%, #37FFEA 100%);
		-webkit-background-clip: text;
		color: transparent;
	}

	.select {
		width: 49.5%;
	}

	.empty {
		width: 396rpx;
		height: 278rpx;
	}

	.item-box {
		width: 48%;
		background-color: #282828;
		position: relative;
	}

	.item-content {
		background-color: #1E1E1E;
	}

	.title-1 {
		font-size: 26rpx;
	}

	.title-2 {
		opacity: 0.4;
		font-size: 26rpx;
	}

	.item-image {
		max-height: 184rpx;
		max-width: 100%;
	}

	.subscript {
		position: absolute;
		right: 0px;
		top: 0px;
		background-color: #191919;
		font-size: 24rpx;
	}
</style>